<template>
<div>
  <h1>{{msg}}</h1>
  <p>{{obj.usName}}</p>
  <p>{{obj.age>=18?'成年':'未成年'}}</p>
  <a v-bind:href="url">百度</a>
  <br>
  <img :src="imgUrl" alt="">
  <p>商品数量{{count}}</p>
  <button @click="jj">减一个</button>
  <button @click="count+=1">增加一个</button>
  <button @click="add">增加一个</button>
  <button @click=addFn(5)>增加五个</button><br>
  <a @click="btn" href="http://www.baidu.com">百度默认行为</a><br>
  <a @click="btn1(10,$event)" href="http://www.baidu.com">百度传参阻止默认行为</a>


  <div @click="father">
    <button @click.stop>阻止事件行为</button>
    <a @click.prevent.stop>阻止默认行为和冒泡</a>
    <button @click.stop="btn4">只运行一次</button>
    <a @click.prevent.once href="http://www.baidu.com">只跳转一次百度</a>
  </div>

  <input type="text" name="" id="" @keyup.enter="btn5">
   <input type="text" name="" id="" @keyup.esc="btn6">
</div>
</template>

<script>

export default {
  data(){
    return {
      msg:"我是蔫巴巴",
      obj:{
        usName:"baa",
        age:'18',
      },
       url:"http://www.baidu.com",
        imgUrl:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1429998580,2238709221&fm=26&gp=0.jpg',
        count:0
    }
  },
  methods: {
    add(){
      this.count++;
    },
    addFn(sum){
      this.count+=sum;
    },
    jj(){
      this.count--;
      if(this.count<0){
        this.count=0
      }
    },
    btn(e){
      e.preventDefault();
    },
    btn1(num,e){
      e.preventDefault();
      alert(num)
    },
    father(){
      console.log("父级事件被触发");
    },
    btn4(){
      console.log("只触发一次事件");
      
    },
    btn5(){
      console.log("进去了");
    },
    btn6(){
      console.log("esc键");
    }
  }
}
</script>

<style>
img{
  width: 200px;
  height: 200px;
}
</style>
